// pages/video/video.js
import request from "../../utils/request";

Page({

    /**
     * 页面的初始数据
     */
    data: {
        videoGroupList:[],  //导航栏标签数据
        navId:"",           //导航的标识
        videoList:[],       //视频列表数据
        videoId:"",         //标识视频id
        videoUpdateTime:[], //记录video播放时长
        trigger:false,      //下拉是否被触发的标志
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        //获取导航栏数据
        this.getVideoGroupData();
    },

    /*获取导航栏数据*/
    async getVideoGroupData(){
        let videoGroupListData = await request("/video/group/list");
        // console.log("videoGroupListData: ",videoGroupListData)
        if(!videoGroupListData){
            return;
        }
        this.setData({
            videoGroupList : videoGroupListData.data.slice(0,14),
            navId: videoGroupListData.data[0].id
        })
        //获取视频列表数据
        this.getVideoList(this.data.navId);
    },

    /*获取视频列表数据*/
    async getVideoList(navId){
        if (!navId){
            //判断navId为空。
            return;
        }
        let videoListData = await request("/video/group", {id:navId});
        //关闭加载提示
        wx.hideLoading();

        if (videoListData.code == 301){
            //301表示用户没有登录，则提醒用户登录，并跳转至登录页面
            wx.showModal({
                title: '登录提示',
                content: '请登录后观看视频内容',
                success (res) {
                    if (res.confirm) {
                        wx.reLaunch({
                            url: '/pages/login/login'
                        })
                    } else if (res.cancel) {
                        return;
                    }
                }
            })
            //这个return绝对不能少，以上else中的return只是表示退出else if。否则还可能出现 Cannot read property map of undefined
            return;
        }
        let index = 0;
        let videoList = videoListData.datas.map(item => {
            item.id = index++;
            return item;
        })
        this.setData({
            videoList,
            trigger:false,
        })
    },

    /*点击切换导航的回调*/
    changeNav(event) {
        let navId = event.currentTarget.id; //通过id向event传参的时候如果传入的是number会自动转换为string
        this.setData({
            //将字符转换为数字。  navId:navId>>>0
            navId:navId*1,
            videoList:[]
        });
        //提示用户视频数据正在加载
        wx.showLoading({
            title:'玩命加载中...',
        })

        //动态获取当前导航栏的数据
        this.getVideoList(this.data.navId);
    },

    /*点击播放/继续播放的回调*/
    handlePlay(event){

        // console.log("handlePlay => event: " , event);
        /*
          问题： 多个视频同时播放的问题
        * 需求：
        *   1. 在点击播放的事件中需要找到上一个播放的视频
        *   2. 在播放新的视频之前关闭上一个正在播放的视频
        * 关键：
        *   1. 如何找到上一个视频的实例对象
        *   2. 如何确认点击播放的视频和正在播放的视频不是同一个视频
        * 单例模式：
        *   1. 需要创建多个对象的场景下，通过一个变量接收，始终保持只有一个对象，
        *   2. 节省内存空间
        * */
        let vid =event.currentTarget.id; //获取当前id

        // 关闭上一个播放的视频
        // this.vid !== vid && this.videoContext && this.videoContext.stop();
        // this.vid = vid;
        //更新data中videoId的状态数据
        this.setData({
            videoId: vid,
        })

        // 创建控制video标签的实例对象
        this.videoContext = wx.createVideoContext(vid);
        // 判断当前的视频之前是否播放过，是否有播放记录, 如果有，跳转至指定的播放位置
        let {videoUpdateTime} = this.data;
        let videoItem = videoUpdateTime.find(item => item.vid === vid);

        /*
        如果event.type === 'tap'则表示点击的是图片而非视频，那么我们不对其进行播放，直接退出；
        这样又会遇到一个问题，就是当编译完成后点击视频，最开始点击的一定是图片，就会造成真正的视频永远不会被播放，解决这个问题可以通过播放记录”videoItem“来进行判别；
        当视频没有播放时，点击图片，event.type === 'tap'的结果为true，而videoItem为false，那么一下if内部不会被执行，当再次播放时event.type === 'tap'的结果还是为true，但是videoItem也是true了。
        当然这样还一个问题是，当播放原视频时，必须点击两次，第一次点击图片，第二次才是视频。这样显然不合理，这时就需要使用video组件的autoplay属性了。当点击图片后切换到视频，而视频设置了自动播放，使用使用起来就跟直接点击视频无二异了。

        * */
        if (event.type === "tap" && videoItem){
            return;
        }

        if(videoItem){
            this.videoContext.seek(videoItem.currentTime);
        }
        // console.log("video.js => 正在播放视频，视频ID", vid)
        this.videoContext.play();
        // this.videoContext.autoplay();
    },

    /*监听视频播放进度的回调*/
    handleTimeUpdate(event){
        let videoTimeObj = {vid:event.currentTarget.id, currentTime:event.detail.currentTime};
        let {videoUpdateTime} = this.data;
        /*
        * 思路： 判断记录播放时长的videoUpdateTime数组中是否有当前视频的播放记录
        *   1. 如果有，在原有的播放记录中修改播放时间为当前的播放时间
        *   2. 如果没有，需要在数组中添加当前视频的播放对象
        *
        * */
        let videoItem = videoUpdateTime.find(item => item.vid === videoTimeObj.vid);
        if(videoItem){
            // 之前有
            videoItem.currentTime = event.detail.currentTime;
        }else{
            // 之前没有
            videoUpdateTime.push(videoTimeObj);
        }
    //    更新videoUpdateTime的状态
        this.setData({
            videoUpdateTime
        })
    },

    // 视频播放结束调用的回调
    handleEnded(event){
        // 移除记录播放时长数组中当前视频的对象
        let {videoUpdateTime} = this.data;
        videoUpdateTime.splice(videoUpdateTime.findIndex(item => item.vid === event.currentTarget.id), 1);
        this.setData({
            videoUpdateTime
        })
    },

    /*自定义下拉刷新的回调 scroll-view*/
    handleRefresher(){
        // 再次发请求，获取最新的视频列表数据
        this.getVideoList(this.data.navId);
    },

    /*滚动到底部的回调 scroll-view*/
    async handelScrollLower(){
        let newVideoList = await request("/video/group", {id:this.data.navId});
        let videoList = this.data.videoList;

        let index = videoList.length;
        let videoListnew = newVideoList.datas.map(item => {
            item.id = index++;
            return item;
        });


        /*console.log("DDDD:", videoListnew.slice(-1)[0].data.vid)
        console.log("DDDD:", videoList.slice(-1)[0].data.vid)*/

        //判断刷新的数据是否跟已有的数据一样，如果一样则提示用户没有更多数据，否则进行刷新并且进行添加。
        if(videoListnew.slice(-1)[0].data.vid === videoList.slice(-1)[0].data.vid){
            wx.showToast({
                title: '没有更多数据',
                icon: 'none',
            });
            return;
        }
        // 刷新的数据跟原来数据不一样，将视频最新的数据更新原有视频列表数据中
        videoList.push(...videoListnew);
        this.setData({
            videoList
        });
        //todo: 可能是网易云对其接口的限制，连续刷新是刷不出数据的，必须等待一会儿才能刷新出新的数据。
    },

    toSearch(){
        wx.navigateTo({
            url: '/pages/search/search'
        })
    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function (from) {
        if(from.form === 'button'){
            return {
                title: '来自button的转发',
                page: '/pages/video/video',
                imageUrl: '/static/images/nvsheng.jpg'
            }
        }else {
            console.log("from in menu:",from)
            return {
                title: '来自menu的转发',
                page: '/pages/video/video',
                imageUrl: '/static/images/nvsheng.jpg'
            }
        }


    },

    /**
     * 用户点击分享到朋友圈
     */
    onShareTimeline:function(){

    }
})